<template>
	<div class="bg-white p-2 position-relative">
		<Row class="p-1">
			<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" class="p-1">
			<Input class="w-100" v-model="searchKey" placeholder="请输入检索账号" />
			</Col>
			<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" class="p-1">
			<Input class="w-100" v-model="searchTel" placeholder="请输入检索电话" />
			</Col>
			<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3" class="p-1">
			<Input class="w-100" v-model="searchSec" placeholder="请输入检索身份证号" />
			</Col>
		</Row>
		<Row class="p-1">
			<Col :xs="24" class="p-1">
			<Button class="m-1 float-left" type="error" shape="circle" @click="newUser" icon="md-add">新增</Button>
			<Button class="m-1 float-right" type="primary" shape="circle" @click="searchs" icon="md-search">查询</Button>
			</Col>
		</Row>
		<div class="mt-1">
			<Row>
				<Col v-for="(user, index) in tableInfo.data" :xs="24" :sm="12" :md="8" :lg="8" :xl="6" :xxl="6"
					class="p-1 mt-2">
				<div class="shadow p-3 radius text-xs text-secondary">
					<div class="p-1 d-flex justify-content-between">
						<span>用户编号</span>
						<span>{{user.userId}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>账户</span>
						<span>{{user.account}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>身份证</span>
						<span>{{user.secId}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>OPENID</span>
						<span>{{user.openId}}</span>
					</div>
					<div class="p-1 d-flex justify-content-end text-sm">
						<Button type="error" @click="remove(user.userId)" ghost>删除</Button>
						<Button type="primary" class="ml-3" @click="show(user.userId)" ghost>详细</Button>

					</div>
				</div>
				</Col>
			</Row>
		</div>
		<div>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				searchKey: "",
				searchTel: "",
				searchSec: "",
				tableInfo: {
					currentPage: 1,
					total: 0,
					columnInfo: [],
					data: [],
					pageSize: 0,
				}
			}
		},
		methods: {
			init: function() {
				this.tableInfo.currentPage = 1;
				this.search();
			},
			newUser: function() {
				this.$router.push({
					name: "user_new"
				});
			},
			show: function(userId) {
				this.$router.push({
					path: "/user/detail?userId=" + userId,
				});
			},
			update(userId) {
				this.$router.push({
					name: "user_update",
					params: {
						userId
					}
				});
			},
			remove: function(userId) {

				this.message.confirm({
					title: "删除提示",
					content: "即将删除用户，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/user/info",
							param: {
								userId
							}
						}).then(data => {
							this.searchs();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			searchs: function() {
				this.tableInfo.currentPage = 1;
				this.search();
			},

			search: function() {
				this.http.get({
					url: "/user/list",
					param: {
						currentPage: this.tableInfo.currentPage,
						account: this.searchKey,
						tel: this.searchTel,
						secId: this.searchSec,
						storeId: this.store.state.currentUser.store.storeId
					}
				}).then(data => {
					console.log(data);
					this.tableInfo.currentPage = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.pages;
					this.tableInfo.data = data.records;
				});
			},
			pageSearch: function(changedPage) {
				this.tableInfo.currentPage = this.tableInfo.currentPage + 1;
				this.search();
			}
		},
		created: function() {
			this.init();
		}

	}
</script>

<style>

</style>